<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }

      /* Custom icon for MilestoneClass "GreenSvg" */
      .GWGanttGreenSvgMilestone,.GSGanttGreenSvgMilestone,.GMGanttGreenSvgMilestone,.GBGanttGreenSvgMilestone,.GTGanttGreenSvgMilestone { background:url(Green.svg) no-repeat; }
      .GWGanttGreenSvgMilestoneHover,.GSGanttGreenSvgMilestoneHover,.GMGanttGreenSvgMilestoneHover,.GBGanttGreenSvgMilestoneHover,.GTGanttGreenSvgMilestoneHover { background:url(GreenHover.svg) no-repeat; }
   </style>
   <script>
   // ------------------------------------------------------------------------------------
   // Returns custom Main bar content, only for row 24
   Grids.OnGetGanttHtml = function(G,row,col,width,comp,crit,plan,idx,txt){
   if(row.id==24) {
      return "<div style='background:#EE4;float:right;font-size:20px;line-height:35px;'>"+G.GetValue(row,"DUR")+"</div><div style='height:35px;'>"
         + DateToString(G.GetValue(row,"START"),"'<div style=\"background:#883;color:white;padding:1px;line-height:16px;\">&nbsp;'dddddd MMM, ddd'</div>'")
         + DateToString(G.GetValue(row,"END"),"'<div style=\"background:#088;color:white;padding:1px;line-height:16px;\">&nbsp;'dddddd MMM, ddd'</div>'")
         + "</div>";
      }
   return txt; // All other rows
   }

   // ------------------------------------------------------------------------------------
   // Returns custom Main bar side text, only for row 24
   Grids.OnGetGanttSideHtml = function(G,row,col,width,comp,crit,plan,idx,txt,side){
   if(row.id==24) {
      if(side==1){ // Left
         return "<div align='center' style='margin-left:auto; margin-right:0px; width:30px; margin-top:9px; background:#EE4; color:black; border:1px solid green; padding:2px; font-size:10px; line-height:10px; border-radius:2px;'>left<br>side</div>";
         }
      else { // Right
         return "<div align='center' style='margin-left:8px; width:30px; margin-top:9px; background:#2A2; color:white; text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; border:1px solid blue; padding:2px; font-size:10px; line-height:10px; border-radius:2px; '>right<br>side</div>";
         }
      }
   return txt; // All other rows
   }
  
   // ------------------------------------------------------------------------------------
   </script>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>1. Simple Main bar and Milestone</h1>
   <h2>Continuous bar or one milestone</h2>

   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='01-Main_bar.js'>01-Main_bar.js</a></div>
      <div class="Main" style='width:100%; height:735px;'>
         <bdo Debug='check' Data_Url='01-Main_bar.js'></bdo>
      </div>
   </center>

   <ul>
      <li>
         There are five tutorials for Gantt task types and features:
         <ul>
            <li>1. Simple Main bar and Milestone - Continuous bar or one milestone</li>
            <li><a href='02-Main_bar_parts.html'>2. Main bar parts</a> - Discrete main bar with more milestones</li>
            <li><a href='03-Main_bar_plans.html'>3. Main bar plans</a> - More independent main bars or milestones in one row</li>
            <li><a href='../GanttRunBar/06-Run_bar_as_task.html'>6. Run bar as task</a> - Complex and extended Gantt task from individual parts</li>
            <li><a href='../GanttRunBar/07-Run_box_as_task.html'>7. Run box as task</a> - Every Run box as independent Gantt task</li>
         </ul>
      </li>
      <li>See documentation for <b><a href="../../Doc/GanttMain.htm">Main bar</a></b></li>
      <li>
         By default is main bar set by <h3>GanttStart</h3> and <h3>GanttEnd</h3> or <h3>GanttDuration</h3>.
         If defined both columns end and duration, the third value is always calculated according to the two others.<br />
      </li>
      <li>
         If set <b>GanttLastUnit</b>, the set end date is increased by this one unit (usually 'd' as day), the GanttEnd means the last unit in this case.<br />
      </li>
      <li>
         To support dependencies, resources, manual start, percentage completion and disabled / locked state there must be set <h3>GanttTask</h3> to the main bar plan like "<b>Main</b>", "<b>Main1</b>", "<b>Main2</b>", ... or for all plans as "<b>All</b>". 
         Default setting is GanttTask="Main" = only the first main bar plan supports the task features.
      </li>
      <li>
         <h4>Milestone</h4> is created when set only GanttStart or GanttEnd or GanttDuration is 0.<br />
         There is difference between start milestone and end milestone. The end milestone is affected by GanttLastUnit
         and also if the milestone is set within excluded range, the end milestone is shown before the range and start milestone after the range.<br />
         The milestone has only two states: complete (GanttComplete=100) and incomplete.<br />
         By <b>GanttMilestones</b> is possible to permit creating only tasks, only milestones or both.
      </li>
      <li>
         Main bar <h4>content</h4> is defined by <h3>GanttHtml</h3> attribute. Main bar can show any text or html code. Milestone cannot show any content.<br />
         The GanttHtml often links the main bar user text defined by <h3>GanttText</h3> attribute.<br />
         The main bar content can be generated also dynamically by <b>OnGetGanttHtml</b> API event.<br />
      </li>
      <li>
         Main bar <h4>side text</h4>. Main bar can show two side texts or any HTML content. The side texts are defined by <h3>GanttHtmlLeft</h3> and <h3>GanttHtmlRight</h3>.<br />
         The texts horizontal position is controlled by <b>GanttHtmlLeftEdge</b> and <b>GanttHtmlRightEdge</b>, the available positions are before, inside left, centered, inside right and after.<br />
         Vertical position is set by <b>GanttHtmlShift</b>. It is also possible to generate the side texts by API event <b>OnGetGanttSideHtml</b> to achieve any count and positions of the main bar side content.<br />
      </li>
      <li>
         Main bar <h4>tooltip</h4> is defined by <h3>GanttTip</h3>. Milestone tooltip is defined by <b>GanttMilestoneTip</b>. The tip can show any text or html code.<br />
         By default the main bar tooltip shows user text defined by <h3>GanttText</h3> attribute.<br />
         The main bar and milestone tooltip can be generated also dynamically by <b>OnGanttTip</b> API event.<br />
      </li>
      <li>
         Task <h4>percentage completion</h4> is set by <h3>GanttComplete</h3> attribute in range 0 - 100.<br /> 
         The completion state is shown only if the main bar plan is included in <b>GanttTask</b>, see above.<br />
         If used calendar / excluded dates, the percentage completion can be shown preciselly for the excluded dates if set <b>GanttExcludeComplete</b>.<br />
         To round the percentage completion to some units (GanttUnits or GanttDataUnits) when is set by click to bar use <b>GanttRoundComplete</b>.
      </li>
      <li>
         Task can be <h4>disabled</h4> or <h4>locked</h4>. The state is set by <h3>GanttDisabled</h3> attribute or column.<br />
         The disabled / locked state is used only if the main bar plan is included in <b>GanttTask</b>, see above.<br />
         Disabled task cannot be changed and is also ignore in all calculations. Locked tasks cannot be changed.<br />
         It is possible to permit changing the disabled/locked tasks manually by a user by <b>GanttEditDisabled</b>='1'.<br />
         To have not editable task, remove the main bar plan from <b>GanttEdit</b> and also set <b>CanEdit='0'</b> to all the source cells.<br />
      </li>
      <li>
         <h4>Dependencies</h4> are attached always for the whole main bar. Normally by <h3>GanttDescendants</h3> or by <h3>GanttAncestors</h3>.<br />
         If the GanttTask contains only one main bar plan and also no run/box, the main bar need not be identified for dependency and the row id is enough, e.g. GanttDescendants = "R1" or "R2#11;R3"<br />
         If the are more flags in GanttTask, the main bar is identified by its plan number, 0 for the first one, e.g. GanttDescendants="0@R1" or "1,1@R2#11;0,1@R3"<br />
         See documentation for <a href="../../Doc/GanttCompute.htm#Dependencies">Defining dependencies</a>.
      </li>
      <li>
         <h4>Manual start</h4> for correcting dependencies is set by <h3>GanttManual</h3>. <br />
         It is permitted / controlled by attributes <b>GanttManualChange</b> and <b>GanttManualSide</b>.<br />
      </li>
      <li>
         <h4>Resources</h4> are attached by <b>GanttResources</b>.<br />
         See documentation for <a href="../../Doc/GanttResources.htm#Assign">Resources assign</a>.
      </li>
      <li>
         Main bar <h4>style</h4> can be controlled by <h3>GanttClass</h3> attribute. For side texts by <b>GanttHtmlLeftClass</b> and <b>GanttHtmlRightClass</b>.<br />
         For milestones can be set special class by <b>GanttMilestoneClass</b>. The milestone class specifies predefined or custom icon for milestone.<br />
         There are predefined 17 standards colored bars and 10 colored milestones.
      </li>
      <li>
         The main bar can show <h4>side icons</h4> on one or both its sides just for visual effect, set by <b>GanttIcons</b>. <br />
         The icons can be default icons for summary tasks or any custom icons defined by <b>GanttIconLeft</b> and / or <b>GanttIconRight</b>.
      </li>
      <li>
         Main bar <h4>position and height</h4>.
         Main bar can be shifted vertically by <b>GanttTop</b> attribute.<br />
         The height of the main bar can be set by <b>GanttHeight</b> attribute.
      </li>
      <li>
         Main bar can be controlled also from JavaScript by <h4>API</h4>, especially by methods <b>GetGanttMain</b> and <b>SetGanttMain</b> and events <b>OnGanttMainChange</b> and <b>OnGanttMainChanged</b>.
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialGantt\s*=\s*(\d+)/), TGIndex = 2048;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridMain1", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialGantt="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>